<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 代码</title>
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
/* 导航栏颜色设置 */
.navbar-nav a:hover { 
background: #3ACC3A !important ;
}
.navbar-nav a:focus { 
background: #3ACC3A !important ;
}


.dropdown a:hover { 
background: #3ACC3A !important ;
}
.dropdown a:focus { 
background: #3ACC3A !important ;
}
</style>
</head>
<body>
<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
					 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="/blog/index/">WOLONG</a>
				</div>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li class="active">
							 <a href="/blog/index/">HOME</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">上传文件<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li><a href="{% url 'upload' %}"> 上传单个图像文件</a></li>
								<li class="divider"></li>
                                <li><a href="{% url 'upfile_ajax_XMLHttpRequest1' %}"> 上传文件1 进度条</a></li>
                                <li><a href="{% url 'upfile_ajax_XMLHttpRequest2' %}"> 上传文件2 进度条 </a></li>
                                <li><a href="{% url 'upfile_ajax_XMLHttpRequest3' %}"> 上传文件3 进度条 </a></li>

                                <li class="divider"></li>

                                <li><a href="{% url 'upfolder' %}"> 批量上传文件(目录内所有文件) </a></li>

                                <li class="divider"></li>

                                <li><a href="{% url 'image_upload' %}"> 上传图像文件(数据库) </a></li>
							 
							</ul>
					    </li>
                        
                        <li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">上传单个html文件<strong class="caret"></strong></a>
							<ul class="dropdown-menu">

					    		<li><a href="{% url 'uphtml' %}"> form上传单个html文件 </a></li>
                            </ul>
					    </li>

						<li class="dropdown">
							 <a href="#" class="dropdown-toggle" data-toggle="dropdown">显示html<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								
								<li class="divider"></li>

								<li>
									 <a href="{% url 'list_html' %}"> html列表</a>
								</li>
						    </ul>
                        </li>


						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">图片显示(懒加载)<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								
								<li class="divider"></li>

								<li>
									 <a href="{% url 'showimg' %}">图片懒加载 每行显示1张图片</a>
								</li>
								<!-- <li class="divider"></li> -->
								<li>
									 <a href="{% url 'showimg2' %}">图片懒加载 每行显示2张图片</a>
								</li>
								<li class="divider"></li>
								<li>
									 <a href="{% url 'list_img' %}">图片懒加载 每行显示4张图片</a>
								</li>
								<li class="divider"></li>
								
								<li>
									 <a href="{% url 'show_db_imageg' %}">图片存贮数据库 每行显示4张图片</a>
								</li>
								<li class="divider"></li>
								
							</ul>
						</li>
                    </ul>
					<form class="navbar-form navbar-right" role="search">
						<div class="form-group">
							<input class="form-control" type="text" />
						</div> <button type="submit" class="btn btn-default">Submit</button>
					</form>
				</div>
			</nav>
		</div>
		{% block content %}{% endblock %}

	{% if messages %} <!--messages消息 width:60px;-->
        <div  style="height:60px;width:972px;color:#3ACC3A;font-size:16px; padding-left:4px;padding-top:2px;background-color:#fff; border:1px solid #ccc;word-wrap:break-word; overflow:auto;overflow-y:auto;margin-left:76px;">           
                {% for message in messages %}
                    <li>{{ message }}</li> 
                {% endfor %}
        </div>
    {% endif %}


</div>
</body>
</html>